import { Component } from 'react';
import PropTypes from 'prop-types';
import { Layout } from 'antd';

import SiderMenu from 'components/SiderMenu/SiderMenu';
import { getMenuData } from './menu';
import logo from 'assets/logo.svg';
import GlobalHeader from 'components/GlobalHeader';

const { Content, Header } = Layout;

class BasicLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
    };
  }

  handleMenuCollapse = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    const { children, location } = this.props;
    const { collapsed } = this.state;

    if (location.pathname === '/login') {
      return <Layout>{children}</Layout>;
    }

    return (
      <Layout>
        <SiderMenu
          logo={logo}
          collapsed={collapsed}
          menuData={getMenuData()}
          location={location}
          onCollapse={this.handleMenuCollapse}
        />
        <Layout>
          <Header style={{ padding: 0 }}>
            <GlobalHeader logo={logo} collapsed={collapsed} onCollapse={this.handleMenuCollapse} />
          </Header>
          <Content style={{ margin: '24px 24px 0', height: '100%' }}>{children}</Content>
        </Layout>
      </Layout>
    );
  }
}

if (process.env.UMI_ENV !== 'prod') {
  BasicLayout.propTypes = {
    location: PropTypes.object.isRequired,
  };
}

BasicLayout.defaultProps = {
  location: {},
};

export default BasicLayout;
